<template>
  <el-breadcrumb>
    <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>其他数据统计</el-breadcrumb-item>
  </el-breadcrumb>
  <el-descriptions
    class="margin-top"
    title="其他数据统计"
    :column="1"
    border
    style="margin-top: 20px;width: 50%;"
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          空气质量检测总数量
        </div>
      </template>
      {{aqiCount}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          空气质量检测良好数量
        </div>
      </template>
      {{aqiGoodCount}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          省网格覆盖率
        </div>
      </template>
      {{provinceCoverage}}%
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          大城市网格覆盖率
        </div>
      </template>
      {{cityCoverage}}%
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup>
import { ref, inject } from "vue";

const axios = inject("axios");

//AQI检查总数量
const aqiCount = ref(0);
//AQI检查良好总数量
const aqiGoodCount = ref(0);
//省网格覆盖率
const provinceCoverage = ref(0);
//大城市网格覆盖率
const cityCoverage = ref(0);

const init = () => {
  axios
    .post("statistics/getAqiCount")
    .then((response) => {
      aqiCount.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });

  axios
    .post("statistics/getAqiGoodCount")
    .then((response) => {
      aqiGoodCount.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });

  axios
    .post("statistics/getProvinceCoverage")
    .then((response) => {
      provinceCoverage.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });

  axios
    .post("statistics/getCityCoverage")
    .then((response) => {
      cityCoverage.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
</script>

<style scoped>
.table-box {
  width: 80%;
  height: 450px;
  overflow: auto;
}
</style>